import React, { Component } from 'react';
import styles from './Style1.module.css';
console.log(styles);

export default class Style1 extends Component {
    state = {
        style: { fontSize: '30px', color: 'red' }
    }
    render () {
        return (
            // 在jsx中写行内样式需要这么写 对象的格式
            // <div style={{fontSize: '20px', color: 'red'}}>
            // 也可以单独抽离出去 写成一个对象的格式, 但必须是驼峰命名法
            // 样式一旦发生冲突,会根据组件先后引入, 后面引入的样式会吧之前的覆盖
            <div style={this.state.style}>
                style1
                <span className={styles.test}>123</span>
                <div className={styles.content}>
                    内容, 我有自己的背景色, 还有style2的字体和颜色样式
                </div>
            </div>
        );
    }
}
